<template>
  <div>
    <h1>分类表</h1>
    <table border="6" cellspacing="0" align="center">
      <tr>
        <td>ID</td>
        <td>类别</td>
      </tr>
      <tr v-for="i in data">
        <td>{{ i.id }}</td>
        <td><a :href="'/#/book?id=' + i.id">{{ i.name }}</a></td>
      </tr>
    </table>

    <h1>搜索</h1>
    <p>请输入姓名：<input type="text" v-model="meg"></p>
    <button @click="fun">搜索</button>
    {{ data1 }}

  </div>
</template>

<script>
export default {
  name: "type",
  data() {
    return {
      data: {},
      data1: {},
      meg: ''
    }
  },

  methods: {
    btn() {
      this.axios.get('type/').then(res => {
        console.log(res)
        this.data = res.data
      })
    },
    fun() {
      this.axios.get('show/?meg=' + this.meg).then(res => {
        this.data1 = res.data
      })
    }
  },

  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>